.ab-input {
  appearance: none;
  width: 100%;
  display: block;
  outline: none;
  line-height: 100%;
  font-size: var(--input-font-size, 13px);
  font-weight: var(--input-font-weight, 400);
  color: var(--input-text-color, $color-neutral-900);
  font-family: var(--input-font-family, Inter);
  background-color: var(--input-background-color, $white);
  padding: var(--input-vertical-padding, 8px)
    var(--input-horizontal-padding, 12px);
  border: var(--input-border-size, 1px) solid var(--input-border-color, black);
  border-radius: var(--input-border-radius, 0);

  &:active,
  &:focus,
  &:hover {
    border-color: color-mix(
      in srgb,
      var(--input-border-color, $palette-neutral-500),
      var(--input-border-color-complement, gray) 30%
    );
  }
}

input.ab-input::placeholder,
textarea.ab-input::placeholder {
  color: color-mix(
    in srgb,
    var(--input-text-color, $color-neutral-900) 40%,
    var(--input-background-color, $white)
  );
}
